<template>
  <view class="humidity-trend">
    <view class="trend-unit">
      <text>单位: %</text>
      <view class="legend">
        <view class="legend-item">
          <view class="legend-color" style="background-color: rgba(129, 246, 66, 1);"></view>
          <text>20cm</text>
        </view>
        <view class="legend-item">
          <view class="legend-color" style="background-color: rgba(66, 96, 246, 1);"></view>
          <text>40cm</text>
        </view>
        <view class="legend-item">
          <view class="legend-color" style="background-color: rgba(66, 198, 246, 1);"></view>
          <text>60cm</text>
        </view>
      </view>
    </view>
    <view class="chart-container">
      <l-echart ref="chartRef"></l-echart>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';
import LimeEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';

export default {
  name: 'HumidityTrend',
  components: {
    'l-echart': LimeEchart
  },
  props: {
    depthData: {
      type: Object,
      default: () => ({
        dates: ['6/14', '6/15', '6/16', '6/17', '6/18'],
        depth20: [45, 38, 50, 68, 55],
        depth40: [35, 30, 45, 55, 45],
        depth60: [30, 15, 20, 35, 25]
      })
    }
  },
  setup(props) {
    const chartRef = ref(null);
    const myChart = ref(null);
    
    const getOption = () => {
      return {
        tooltip: {
          trigger: 'axis',
          confine: true
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 15,
          top: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: props.depthData.dates,
          axisLine: {
            lineStyle: {
              color: '#999999'
            }
          },
          axisLabel: {
            color: '#666666'
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 80,
          axisLine: {
            lineStyle: {
              color: '#999999'
            }
          },
          axisLabel: {
            color: '#666666',
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '20cm',
            type: 'line',
            smooth: true,
            data: props.depthData.depth20,
            itemStyle: {
              color: 'rgba(129, 246, 66, 1)'
            },
            lineStyle: {
              color: 'rgba(129, 246, 66, 1)',
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(129, 246, 66, 0.6)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(129, 246, 66, 0.1)'
                  }
                ]
              }
            },
            symbol: 'circle',
            symbolSize: 4
          },
          {
            name: '40cm',
            type: 'line',
            smooth: true,
            data: props.depthData.depth40,
            itemStyle: {
              color: 'rgba(66, 96, 246, 1)'
            },
            lineStyle: {
              color: 'rgba(66, 96, 246, 1)',
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(66, 96, 246, 0.6)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(66, 96, 246, 0.1)'
                  }
                ]
              }
            },
            symbol: 'circle',
            symbolSize: 4
          },
          {
            name: '60cm',
            type: 'line',
            smooth: true,
            data: props.depthData.depth60,
            itemStyle: {
              color: 'rgba(66, 198, 246, 1)'
            },
            lineStyle: {
              color: 'rgba(66, 198, 246, 1)',
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(66, 198, 246, 0.6)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(66, 198, 246, 0.1)'
                  }
                ]
              }
            },
            symbol: 'circle',
            symbolSize: 4
          }
        ]
      };
    };
    
    // 初始化图表
    onMounted(() => {
      setTimeout(async() => {
        if(!chartRef.value) return;
        try {
          myChart.value = await chartRef.value.init(echarts);
          myChart.value.setOption(getOption());
        } catch (error) {
          console.error('图表初始化错误:', error);
        }
      }, 300);
    });
    
    // 监听数据变化更新图表
    watch(() => props.depthData, (newVal) => {
      if(myChart.value) {
        myChart.value.setOption({
          xAxis: {
            data: newVal.dates
          },
          series: [
            {
              data: newVal.depth20
            },
            {
              data: newVal.depth40
            },
            {
              data: newVal.depth60
            }
          ]
        });
      }
    }, { deep: true });
    
    return {
      chartRef
    };
  }
}
</script>

<style lang="scss">
.humidity-trend {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  
  .trend-unit {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .legend {
      display: flex;
      
      .legend-item {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        
        .legend-color {
          width: 20rpx;
          height: 6rpx;
          margin-right: 6rpx;
          border-radius: 3rpx;
        }
      }
    }
  }
  
  .chart-container {
    height: 300rpx;
    position: relative;
    width: 100%;
  }
}
</style> 